import type { ProColumns } from '@ant-design/pro-components';
import { listDevice } from '@/services/ant-design-pro/api';
import { ProTable } from '@ant-design/pro-components';
import { Progress, Space, Tag } from 'antd';

const columns: ProColumns<API.DeviceListItem>[] = [
  {
    title: '设备ID',
    dataIndex: 'deviceId',
    align: 'left',
    width: 100,
    // sorter: (a, b) => a.deviceId - b.deviceId,
  },
  {
    title: '设备名称',
    width: 100,
    dataIndex: 'name',
    render: (_) => <a>{_}</a>,
  },
  {
    title: '设备状态',
    width: 100,
    dataIndex: 'status',
    initialValue: 'all',
    valueEnum: {
      all: { text: '全部', status: 'Default' },
      close: { text: '关闭', status: 'Default' },
      running: { text: '运行中', status: 'Processing' },
      online: { text: '已上线', status: 'Success' },
      error: { text: '异常', status: 'Error' },
    },
  },
  {
    title: '剩余电量（%）',
    tooltip: '显示剩余电量',
    width: 140,
    key: 'since1',
    hideInSearch: true,
    dataIndex: 'battery',
    render: (Text, record, _) => (
      <Space >
        <Progress
          steps={5}
          percent={record.battery}
          size={[10, 40]}
        />
      </Space>
    ),
  },
  {
    title: '上次充电',
    tooltip: '最后一次充电开始和介绍时间',
    width: 140,
    key: 'since2',
    hideInSearch: true,
    dataIndex: 'batteryTime',
    render: (Text, record, _) => (
      <Space>
        <Tag>{record.batteryTime}</Tag>
      </Space>
    ),
  },
  {
    title: '软件版本',
    tooltip: '软件版本名称，如果过旧请走OTA升级',
    width: 140,
    key: 'since3',
    hideInSearch: true,
    dataIndex: 'version',
  },
  {
    title: '创建时间',
    tooltip: '设备激活的时间',
    width: 140,
    key: 'since4',
    hideInSearch: true,
    dataIndex: 'gmtCreate',
    valueType: 'date',
    // sorter: (a, b) => a.createDate - b.createDate,
  },
];

export default () => {
  return (
    <ProTable<API.DeviceListItem>
      columns={columns}
      request={listDevice}
      rowKey="key"
      pagination={{
        showQuickJumper: true,
      }}
      search={{
        optionRender: false,
        collapsed: false,
      }}
      dateFormatter="string"
      headerTitle="设备列表"
      toolBarRender={() => []}
    />
  );
};
